<template>
    <div>
        <el-container>
            <el-aside :style="{ width: asideSmallWidth + 'px' }">
                <div style="height:60px;line-height: 60PX;background-color: aliceblue;text-align: center;">
                    <label :class="asideLogo">LOGO</label>
                </div>
                <el-menu default-active="/home" :collapse="isCollapse" @select="handleSelect">
                    <!-- @ospen="handleOpen" @close="handleClose" -->
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页看板</span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-platform"></i>
                            <span slot="title">系统信息管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/user">用户管理</el-menu-item>
                            <el-menu-item index="/home/role">角色管理</el-menu-item>
                            <el-menu-item index="/home/menu">菜单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">个人信息管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/selfinfo">个人信息</el-menu-item>
                            <el-menu-item index="/home/password">修改密码</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-row type="flex" justify="space-between">
                        <el-col :span="2" style="text-align: left;">
                            <i @click="changeAsideState"
                                :class="isCollapse == true ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
                                style="padding:20px,cursor: pointer" />
                        </el-col>
                        <el-col :span="4">
                            <el-row>
                                <el-col :span="12">
                                    <SwitchLang></SwitchLang>
                                </el-col>
                                <el-col :span="12">
                                    <el-menu mode="horizontal" @select="handleSelect">
                                        <el-submenu index="1">
                                            <template slot="title">
                                                <el-avatar :src="selfinfo.photo || default_user_photo"
                                                    :size="50"></el-avatar>
                                                <span slot="title">{{ selfinfo.username }}</span>
                                            </template>
                                            <el-menu-item index="/home/selfinfo">
                                                <i class="el-icon-user"></i>
                                                <span slot="title">个人信息</span>
                                            </el-menu-item>
                                            <el-menu-item index="/home/password">
                                                <i class="el-icon-lock"></i>
                                                <span slot="title">修改密码</span>
                                            </el-menu-item>
                                            <el-menu-item index="logout">
                                                <i class="el-icon-circle-close"></i>
                                                <span slot="title">退出登录</span>
                                            </el-menu-item>
                                        </el-submenu>
                                    </el-menu>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
                        <el-breadcrumb-item
                            v-show="this.$route.meta.group">{{ this.$route.meta.group }}</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import SwitchLang from '@/components/SwitchLang';
import { doLogout } from "@/api/login";
import * as utils from "@/utils";

export default {
    name: 'home',
    components: {
        SwitchLang
    },
    data() {
        return {
            selfinfo: {},
            default_user_photo: require('@/assets/photo/p-m-1.jpg'),
            isCollapse: false,
            asideSmallWidth: 201,
            asideLogo: 'aside-logo-normal'
        }
    },
    methods: {
        changeAsideState() {
            this.isCollapse = !this.isCollapse;
            this.setAsideState();
            this.$cookies.set('isCollapse', this.isCollapse);
        },
        setAsideState() {
            if (this.isCollapse) {
                this.asideLogo = 'aside-logo-collapse';
                this.asideSmallWidth = 65;
            } else {
                this.asideSmallWidth = 201;
                this.asideLogo = 'aside-logo-normal';
            }
        },
        handleSelect(key, keyPath) {
            console.log(key); console.log(keyPath);
            if (key !== 'logout') {
                this.$router.push({
                    path: key,
                    params: { data: 'haha' }
                });
            } else {
                this.$confirm('确定要退出登录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    doLogout().then(res => {
                        const { msg } = res;
                        this.$message.success(msg);
                        this.$store.commit("setCurrentUser", null);//setCurrentUser方法中会清空store和localstorage
                        this.$router.replace('/login');
                    });
                }).catch();
            }
        }
    },
    mounted() {
        this.selfinfo = this.$store.getters.getCurrentUser;
        if(this.selfinfo.gender===0){
            this.default_user_photo = require('@/assets/photo/p-f-3.jpg');
        }else if(this.selfinfo.gender===1){
            this.default_user_photo = require('@/assets/photo/p-m-3.jpg');
        }else {
            this.default_user_photo = require('@/assets/photo/p-m-1.jpg');
        }
        this.isCollapse = this.$cookies.get('isCollapse') === 'true';
        this.setAsideState();
    },
}

</script>
<style scoped>
.el-container {
    height: 100vh !important;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    padding: 5px;
}

.el-aside {
    text-align: left;
}

.aside-logo-normal {
    font-size: 30px;
}

.aside-logo-collapse {
    font-size: 15px;
}
</style>